import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { LoginForm, ProConfigProvider, ProFormText } from "@ant-design/pro-components";
import apis from "@/service/index";
import CryptoJS from "crypto-js";

const encrypt = (text: string) => {
  const SECRET_KEY = CryptoJS.enc.Utf8.parse("mynameisdemo");
  const SECRET_IV = CryptoJS.enc.Utf8.parse("mynameisdemo");
  let srcs = CryptoJS.enc.Utf8.parse(text);
  let encrypted = CryptoJS.AES.encrypt(srcs, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
  let encryptText = CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
  return encryptText;
};

export default () => {
  const onLogin = async ({ username, password }: any) => {
    let entry = await apis.login({ username: encrypt(username), password: encrypt(password) });
    console.log(entry, "eeeeee");
  };
  return (
    <ProConfigProvider hashed={false}>
      <div style={{ backgroundColor: "#fff", marginTop: "10%" }}>
        <LoginForm
          logo="https://img0.baidu.com/it/u=3316636492,2799302396&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
          title="登录"
          onFinish={onLogin}
        >
          <ProFormText
            name="username"
            fieldProps={{
              size: "large",
              prefix: <UserOutlined className={"prefixIcon"} />
            }}
            placeholder={"请输入用户名"}
            rules={[
              {
                required: true,
                message: "请输入用户名!"
              }
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: "large",
              prefix: <LockOutlined className={"prefixIcon"} />
            }}
            placeholder={"请输入密码"}
            rules={[
              {
                required: true,
                message: "请输入密码！"
              }
            ]}
          />
        </LoginForm>
      </div>
    </ProConfigProvider>
  );
};
